Barra de progreso

Visión General del Componente

El componente de Progreso en Emvi UI comunica el avance de tareas y el estado del sistema mediante indicadores lineales y circulares. Soporta modos determinados (%) e indeterminados (en curso), etiquetas opcionales y estados de éxito/error. Está diseñado para mantener coherencia entre maquetas en Figma y código con Tailwind, alineado con tokens de pista, relleno, etiqueta y movimiento. Úsalo en cargas, instalaciones, procesos en segundo plano y flujos por pasos. Palabras clave: progress bar, progress bar UI, UI progress bar, progress bar UI Figma, circle progress bar UI, bar progression.

Retroalimentación visual sobre la finalización de tareas

La barra de progreso es un elemento esencial de la interfaz gráfica de usuario diseñado para proporcionar a los usuarios retroalimentación visual sobre el progreso de tareas o procesos en curso. Sirve como un indicador claro de cuánto se ha completado una tarea y cuánto queda, ayudando a los usuarios a estimar el tiempo de finalización y gestionar sus expectativas en consecuencia.

Tipos y Variantes

Variantes comunes:
- Lineal — Determinada (0–100), Indeterminada (barra animada), Buffer (pista secundaria de datos precargados), Segmentada (pasos/hitos).
- Circular — Determinada (arco del trazo según %), Indeterminada (spinner), Con etiqueta centrada (valor o ícono).
- Ubicación de etiqueta — ninguna / inicial / final / superior / dentro de la barra (compacta).
- Validación — éxito, advertencia, error (color + ícono), en pausa. Todas las variantes consideran tema claro/oscuro y usan tokens como progress.track, progress.fill, progress.buffer, progress.label, progress.ring, progress.indeterminate, progress.success, progress.error.

Tamaños, Espaciado y Escala

Escalas SM/MD/LG:
- Alturas lineales: 4–6–8 px (SM/MD/LG) con esquinas en sintonía con inputs/botones.
- Diámetros circulares: 16–24–48 px con trazos de 2–4 px.
- Espacio de etiqueta: 6–8 px entre barra y texto; dentro de la barra usar tipografía fuerte. Mantén objetivos táctiles ≥44×44 px cuando haya controles (p. ej., pausar/cancelar) y ritmo vertical consistente con controles y alertas adyacentes.

Estados y Comportamiento

Las barras determinadas exponen value y min/max (0–100 por defecto). Las indeterminadas ciclan con movimiento sutil; respeta prefers-reduced-motion. Las de buffer muestran una pista secundaria para datos descargados/preprocesados. Usa pausa para tareas detenidas y cambia a éxito/error al finalizar. Evita “saltos” falsos; las transiciones deben ser suaves y veraces. En RTL invierte la dirección del relleno cuando aplique.

Accesibilidad

Usa role="progressbar" con aria-valuemin, aria-valuemax y aria-valuenow en progreso determinado. Proporciona etiqueta accesible (visible o aria-label). Para indeterminado, omite aria-valuenow y anuncia el contexto (“Cargando datos”). Mantén contraste 4.5:1 entre relleno y pista. Evita anuncios continuos; agrúpalos (p. ej., cada 10%). El foco debe permanecer en la tarea salvo que haya controles (pausar/cancelar).

Integración con Figma y Tailwind

Figma: variantes para lineal/circular, determinado/indeterminado, posiciones de etiqueta, tamaños (SM/MD/LG) y resultados (éxito/error). Tokens mapean estilos: progress.track, progress.fill, progress.buffer, progress.label. Auto Layout mantiene gaps; propiedades del componente alternan etiquetas e íconos. Tailwind: compón con relative, rounded-full y animaciones utilitarias; expón variables CSS (--progress-track, --progress-fill) o tokens para sincronizar temas. Incluye utilidades para inversión RTL y fallback de prefers-reduced-motion.

Buenas Prácticas de Implementación

- Prefiere barras determinadas si conoces el total; usa indeterminadas de forma temporal.
- Mantén el movimiento sutil; respeta usuarios con reducción de movimiento.
- Acompaña con etiquetas o ETA cuando aporte valor; evita duplicar información.
- En listados grandes, usa esqueletos y muestra progreso solo donde sea útil.
- Alinea alturas y tipografía con inputs/botones para conservar el ritmo visual.
- Al finalizar, cambia a estado de éxito brevemente o colapsa la barra para reducir ruido.

Aplicación en desarrollo de software y web

En aplicaciones de software y desarrollo web, las barras de progreso se emplean con frecuencia para representar el estado de operaciones como descargas de archivos, instalaciones de software, cargas de datos o cualquier tarea donde el progreso pueda cuantificarse. Esta representación visual mejora la experiencia del usuario al ofrecer transparencia y tranquilidad durante actividades potencialmente largas.

Mejorando la participación del usuario

Al mostrar actualizaciones de progreso en tiempo real, las barras de progreso involucran activamente a los usuarios y mantienen su atención durante la duración de una tarea. El atractivo visual y la naturaleza intuitiva de las barras de progreso las convierten en una herramienta efectiva para mejorar la usabilidad y la satisfacción general con las aplicaciones, asegurando que los usuarios permanezcan informados y empoderados durante sus interacciones.